<template>
  <div>
    <div style="width: 100%;height:100%;background-color: white; padding:15px;margin:0 auto;">
      <div style="margin-bottom: 5px; line-height: 40px">
        <a-row>
          <a-col :span="12">
            <a-select placeholder="跟进类型" v-model="queryParam.followType" style="width: 100%;" allowClear @change="getCustomerFollowInfo()">
              <a-select-option value="1">系统操作</a-select-option>
              <a-select-option value="2">微信跟进</a-select-option>
              <a-select-option value="3">电话跟进</a-select-option>
              <a-select-option value="4">面谈跟进</a-select-option>
              <!--<a-select-option value="5">客户跟进</a-select-option>-->
            </a-select>
          </a-col>
          <a-col :span="12">
            <a-select
              show-search
              :allowClear="true"
              placeholder="用户"
              v-model="queryParam.followCreateId"
              :filter-option="filterOptionCreateBy"
              style="width: 100%;margin-left: 10px;margin-right: 10px"
              @change="getCustomerFollowInfo()">
              <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.title }}</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="12">
            <a-button type="primary" v-has="'customer:followLog'" @click="addFollowLog()" style="width: 100%;">添加跟进记录</a-button>
          </a-col>
          <a-col :span="12">
            <a-checkbox @change="onChange" style="margin-left:10px;">只显示跟进</a-checkbox>
          </a-col>
        </a-row>
        
        
        
      </div>
      <div style="height: calc(80vh); overflow-y: auto">
        <a-skeleton :loading="timelineLoading" active>
          <a-timeline v-if="followInfoList.length !== 0" style="margin-top: 10px;">
            <div class="card">
              <a-timeline-item v-for="(item,index) in followInfoList" :key="index">
                <a-card :title="'跟进时间：' + item.followTime" style="width: 100%;">
                  <a-row>
                    <a-col :span="24">
<!--                      <img :src="item.avatar" style="height: 40px;width: 40px;border-radius: 50%"/>-->
                      <a-avatar :src="item.sysUser.avatar" v-if="item.sysUser != null" style="padding: 0px"></a-avatar>
                      <a-avatar style="color: #f56a00; backgroundColor: #fde3cf" v-else>{{ item.createBy.substring(0, 1) }}</a-avatar>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="24" class="detail">
                      <div>
                        <span v-if="item.sysUser != null">创建人:<span>{{item.createBy}}</span></span>
                        <span v-else>创建人:<span >{{item.createBy}}</span></span><br>
                      </div>
                      <div>
                        <span>跟进类型:<span >{{getTypeName(item.type)}}</span></span><br>
                      </div>
                      <div>
                        <span>跟进内容:<span >{{item.contentList[0]}}</span></span><br>
                        <div v-if="index != 0" v-for="(content,index) in item.contentList" :key="index" >
                          {{content}}
                        </div>
                      </div>
                      <div v-if="item.carbonBy != null && item.carbonBy != ''">
                        <span>抄送人：<span style="padding: 0 5px 0 5px" v-for="(ccName,index) in item.ccList">{{ccName}}</span></span><br>
                      </div>
                      <div v-if="item.nextFollowTime != null">
                        <span>下次跟进时间:<span >{{item.nextFollowTime}}</span></span><br>
                      </div>
                      <div>
                        <img :src="imgUrl" @click="handlePreview(imgIndex,item.imgList)" style="width: 100px;height: 100px;margin-right: 10px"
                             v-for="(imgUrl,imgIndex) in item.imgList" :key="imgIndex">
                      </div>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="24" v-if="item.type !== 1">
                      <div style="margin-top:35px;margin-right:-10px" @click="showComment(item.id)">
                        <a>
                          <a-icon type="star" />
                          <span style="padding-left: 2px;padding-right: 2px">评论</span>
                          <span style="padding: 0px" v-if="item.commentCount >=1">({{item.commentCount}})</span>
                        </a>
                      </div>
                    </a-col>
                  </a-row>
                  <a-row>
                    <div v-show="item.id == currentFollowId && showCommentFlag">
                      <div style="margin-top: 7px;width: 100%;height: 1px;background: lightgrey"></div>
                      <div style="margin-top: 20px">
                        <a-row>
                          <a-col :span="18">
                            <a-input v-model:value="content" placeholder="请输入内容" />
                          </a-col>
                          <a-col :span="6">
                            <a-button type="primary" @click="saveComment(item.id)">发布</a-button>
                          </a-col>
                        </a-row>
                        <a-row :gutter="[16,16]" v-for="(comment,index1) in item.commentList" :key="index1">
                          <a-col :span="22" style="margin-right: 20px">
                            <div style="float: left">
                              <a-avatar :src="comment.avatar" v-if="comment.avatar" style="padding: 0px"></a-avatar>
                              <a-avatar style="padding: 0px;color: #f56a00; backgroundColor: #fde3cf" v-else>{{ comment.createBy.substring(0, 1) }}</a-avatar>
                              <span>{{comment.createBy}}</span>
                            </div>
                            <div style="float:right;">
                              <a-popconfirm title="确定删除此条评论吗?" @confirm.stop="() => deleteComment(comment.id)">
                                <a><a-icon type="close" /></a>
                              </a-popconfirm>
                            </div>
                          </a-col>
                          <a-col :span="22">
                            <div style="margin-top: 5px;">{{comment.commentContent}}</div>
                            <div style="color: darkgray;text-align: right;margin-top: 5px">{{comment.createTime}}</div>
                            <div style="float: right;margin-top: 5px;width: 100%;height: 1px;background: lightgrey"></div>
                          </a-col>
                        </a-row>
                      </div>
                    </div>
                  </a-row>
                </a-card>
              </a-timeline-item>
            </div>
          </a-timeline>
          <a-empty v-else style="margin-top: 40px;" />
        </a-skeleton>
      </div>
  

      <a-modal class="img-style" :visible="previewVisible" :footer="null" centered width="auto" @cancel="handleClose" :closable="false">
        <JReview :path="previewImage" :pathList="imgList"></JReview>
      </a-modal>
    </div>
    <addFollowLog ref="addFollowLog" @ok="getCustomerFollowInfo"></addFollowLog>
    
  </div>
</template>

<script>
  import addFollowLog from "./modules/addFollowLog"
  import {getAction, deleteAction, postAction} from "@api/manage";
  import { ImagePreview } from 'vant';
  export default {
    components: {
      addFollowLog,
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    inject:['closeCurrent'],
    data() {
      return {
        url: {
          getCustomerInfoById: '/ghCustomerInfo/getCustomerInfoById',
          list: "/ghCustomerInfo/list",
          delete: "/ghCustomerInfo/delete",
          deleteBatch: "/ghCustomerInfo/deleteBatch",
          exportXlsUrl: "/ghCustomerInfo/exportXls",
          importExcelUrl: "/ghCustomerInfo/importExcel",
          getItemsByDictCodeUrl: "/ghCustomerInfo/getItemsByDictCode",
          getCustomerFollowInfo: "/ghFollowRecord/getCustomerFollowRecordInfo",
          queryAllUserBackCombo: "/sys/api/queryAllUserBackCombo",
          commentList: "/ghFollowRecordComment/list",
          commentAdd: "/ghFollowRecordComment/add",
          commentDelete: "/ghFollowRecordComment/delete"
        },
        userList: [],
        isShowFollowFlag: false,
        timelineLoading: false,
        followInfoList: [],
        currentFollowId: 0,
        showCommentFlag: false,
        content:'',
        queryParam:{},
        followType: '',
        previewImage: '',
        imgList:[],
        previewVisible: false,
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    created() {
      // this.getCustomerInfo();
      this.getCustomerFollowInfo();
      this.getUserList();
    },
    methods: {
      //获取跟进记录
      getCustomerFollowInfo() {
        this.timelineLoading = true;
        console.log(this.queryParam)
        getAction(this.url.getCustomerFollowInfo, {
          customerId: this.customerId,
          isScrapFollow: 1,
          type: this.queryParam.followType,
          createId: this.queryParam.followCreateId,
          isShowFollowFlag: this.isShowFollowFlag,
        }).then((res) => {
          if (res.success) {
            this.timelineLoading = false;
            this.followInfoList = res.result;
          }
        })
      },
      filterOptionCreateBy(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      getUserList() {
        getAction(this.url.queryAllUserBackCombo, {})
        .then((res) => {
          this.userList = res;
        })
      },
      addFollowLog() {
        this.$refs.addFollowLog.add(this.customerId);
        this.$refs.addFollowLog.currentProgress = this.defaultProgressValue;
        this.$refs.addFollowLog.title = "添加跟进记录";
      },
      onChange(e){
        this.isShowFollowFlag = e.target.checked;
        this.getCustomerFollowInfo();
      },
      //预览图片
      async handlePreview(imgIndex,imgList) {
        console.log(imgList)
        ImagePreview({
          images: imgList,
          startPosition: imgIndex,
        });


        // this.previewImage = url;
        // this.imgList = imgList;
        // this.previewVisible = true;
      },
      //显示评论
      showComment(followId){
        if (this.currentFollowId == followId){
          if (this.showCommentFlag == true){
            this.showCommentFlag = false;
          }else {
            this.showCommentFlag = true;
          }
        } else if(this.currentFollowId != followId){
          this.currentFollowId = followId;
          this.showCommentFlag = true;
        }
      },
      deleteComment(commentId){
        //删除评论
        let that = this;
        deleteAction(that.url.commentDelete, {
          id: commentId
        }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            this.getCustomerFollowInfo();
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      //发布评论
      saveComment(followId){
        if (this.content == "" || this.content == null){
          this.$message.error("评论内容不能为空")
          return;
        }
        this.loading = true;
        let params = {
          followId: followId,
          commentContent: this.content
        };
        postAction(this.url.commentAdd, params).then((res) => {
          if (res.success) {
            this.loading = false;
            this.getCustomerFollowInfo();
            this.$message.success(res.message)
            this.content = "";
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //显示评论
      showComment(followId){
        if (this.currentFollowId == followId){
          if (this.showCommentFlag == true){
            this.showCommentFlag = false;
          }else {
            this.showCommentFlag = true;
          }
        } else if(this.currentFollowId != followId){
          this.currentFollowId = followId;
          this.showCommentFlag = true;
        }
      },
      getTypeName(type) {
        if (type === 1) {
          return "系统操作";
        } else if (type === 2) {
          return "微信跟进";
        } else if (type === 3) {
          return "电话跟进";
        } else if (type === 4) {
          return "面谈跟进";
        } else if (type === 5) {
          return "客户跟进";
        }
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },

    },
  }
</script>


<style lang="less" scoped>
  .card /deep/ .ant-card-head-title{
    font-size: 13px;
  }
  .detail{
    font-weight: normal;
    &>div{
      margin-bottom: 5px;
      &>span{
        color: #000;
        span{
          margin-left: 5px;
          color: darkgray
        }
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .img-style /deep/ .ant-modal-content{
  background-color:rgba(0,0,0, 0) !important;
  box-shadow: none;

}
</style>


